<template>
  <view class="layout layout-column">
    <van-sticky>
      <van-nav-bar
        :placeholder="true"
        title="任务下达"
        left-arrow
        @click-left="back"
      >
        <template #right>
          <van-button
            type="primary"
            @click="onSubmit"
            class="layout-btn"
            size="small"
            >提交</van-button
          >
        </template>
      </van-nav-bar>
    </van-sticky>
    <div class="van-list">
      <van-form>
        <van-field
          v-model="dataForm.groupName"
          name="groupName"
          label="班组"
          is-link
          required
          readonly
          @click="show = true"
        />
        <van-field
          v-model="dataForm.userLabelList"
          name="userLabelList"
          label="责任人"
          is-link
          required
          readonly
          @click="userShow = true"
        />
        <van-field
          readonly
          clickable
          name="expectedResolutionTime"
          required
          v-model="dataForm.expectedResolutionTime"
          label="期望解决时间"
          label-width="100px"
          is-link
          @click="onChangeTime('expectedResolutionTime')"
        />
      </van-form>
    </div>
    <van-popup v-model:show="show" position="bottom">
      <van-picker
        title="班组"
        :columns="columns"
        @confirm="onConfirmClass"
        @cancel="show = false"
      />
    </van-popup>
    <MultiplePicker
      title="维修人员"
      :show="userShow"
      :columns="userList"
      @confirm="onConfirmUser"
      :defaultIndex="defaultIndex"
      @cancel="userShow = false"
    />
    <van-popup v-model:show="showPicker" position="bottom">
      <van-datetime-picker
        @confirm="confirm"
        @cancel="showPicker = false"
        v-model="checkTime"
        type="datetime"
        title="点检时间"
        :min-date="minDate"
      />
    </van-popup>
  </view>
</template>
      
  <script>
import { arrangeIn, report, getGroup } from "@/api/home.js";
import { mapGetters, mapMutations } from "vuex";
import { Notify, Toast, Dialog } from "vant";
import dayjs from "dayjs";
import MultiplePicker from "../maintain/multiple-picker";
export default {
  components: { MultiplePicker },
  data() {
    return {
      loading: false,
      show: false,
      userShow: false,
      showPicker: false,
      timeType: "",
      customFieldName: {
        text: "classifyName",
        values: "id",
      },
      defaultIndex: [],
      value: "",
      dataForm: {
        startTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      },
      checkTime: new Date(),
      minDate: new Date(2024, 0, 1),
      list: [],
      userList: [],
      columns: [],
      groupList: [],
      repairClassData: [],
      userAssign: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo", "dataRow"]),
  },
  onLoad() {
    this.dataForm.checkBy = this.userInfo.userId;
    this.dataForm.checkUserName = this.userInfo.userName;
    this.getGroupList();
    // this.dataForm = {
    //   ...this.dataRow,
    // };
  },
  mounted() {},
  methods: {
    async getGroupList() {
      const res = await getGroup();
      this.groupList = res.data;
      this.columns = res.data.map((item) => item.groupName);
    },

    back() {
      history.back();
    },
    onSubmit() {
      Dialog.confirm({
        title: "提示",
        message: "是否确认提交？",
      }).then(async () => {
        await arrangeIn({
          ...this.dataForm,
          id: this.dataRow.id,
        });
        Toast.success("提交成功！");
        history.back();
      });
    },
    onConfirmClass(groupName) {
      const row = this.groupList.find((item) => item.groupName == groupName);
      this.dataForm.groupName = groupName;
      this.dataForm.groupId = row.groupId;
      this.dataForm.userList = [];
      let value = [];
      this.userList = row.groupUsers.map((item) => {
        this.dataForm.userList.push({
          userName: item.userName,
          userId: item.userId,
        });
        value.push(item.userName);
        return {
          ...item,
          name: item.userName,
          id: item.userId,
        };
      });
      this.defaultIndex = value;
      this.dataForm.userLabelList = value.join(",");
      this.show = false;
    },
    onChangeTime(type) {
      this.timeType = type;
      this.showPicker = true;
    },
    confirm(date) {
      this.dataForm[this.timeType] = dayjs(date).format("YYYY-MM-DD HH:mm:ss");
      this.showPicker = false;
    },
    onConfirmUser(data) {
      if (data.value.length) {
        this.defaultIndex = data.value;
        this.dataForm.userLabelList = data.value.join(",");
        this.dataForm.userList = data.selected.map((item) => {
          return {
            userName: item.label,
            userId: item.value,
          };
        });
      } else {
        this.defaultIndex = [];
        this.dataForm.userLabelList = [];
        this.dataForm.userList = [];
      }
      this.userShow = false;
    },
  },
};
</script>
      
      <style lang="scss" scoped>
.home {
  height: calc(100% - var(--van-tabbar-height));
  padding: 10px;
}
</style>
      